@charset "utf-8";

main {
    overflow-y: scroll;

    padding: 15px;

    flex: 1;

    // 最新
    .newcourse {
        .title {
            font-size: 18px;

            color: #101010;
        }

        .info {
            display: block;
            overflow: hidden;

            margin-top: 20px;
            border-radius: 15px;
            padding-bottom: 10px;

            box-shadow: 0 0 8px 0 rgba(0, 0, 0, .4);
        }

        .info-img {
            width: 100%;
            height: 150px;

            object-fit: cover;
        }

        .course-title {
            padding: 0 15px;

            font-size: 16px;
            font-weight: bold;

            color: #101010;
        }

        .desc {
            overflow: hidden;

            margin-top: 5px;
            padding: 0 15px;

            font-size: 14px;
            white-space: nowrap;
            text-overflow: ellipsis;

            color: #9a9a9a;
        }
    }

    // 旧课程
    .oldcourse {
        .info {
            display: block;
            overflow: hidden;

            position: relative;

            margin-top: 20px;
            border-radius: 15px;
            width: 100%;
            height: 140px;

            box-shadow: 0 0 8px 0 rgba(0, 0, 0, .4);

            .info-img {
                width: 100%;
                height: 140px;

                object-fit: cover;
            }

            .course-title,
            .desc {
                position: absolute;
                bottom: 40px;
                left: 0;

                padding: 0 15px;

                color: #fff;
            }

            .desc {
                overflow: hidden;

                bottom: 10px;

                font-size: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}

// ......................
.changecourse {
    text-align: center;

    button {
        margin-top: 20px;
        border-radius: 27px;
        width: 100%;
        max-width: 320px;
        height: 55px;

        font: normal 18px/55px "微软雅黑";

        color: #fff;
        background-color: #4294ff;
    }
}

.change-mask {
    display: none;
    overflow-y: scroll;

    position: absolute;

    padding: 15px;
    width: 100%;
    min-width: 320px;
    max-width: 1000px;
    height: 100%;

    text-align: center;

// background-color: #59b2db;

    background-color: #fff;

    flex: 1;
    flex-direction: column;

    button {
        margin-top: 20px;
        border-radius: 27px;
        width: 100%;
        max-width: 320px;
        height: 55px;

        font: normal 18px/55px "微软雅黑";

        color: #fff;
        background-color: #4294ff;
    }

    .allcourse {
        .info {
            display: block;
            overflow: hidden;

            position: relative;

            margin-top: 20px;
            border-radius: 15px;
            width: 100%;
            height: 140px;

            .info-img {
                width: 100%;
                height: 140px;

                object-fit: cover;
            }

            .course-title,
            .desc {
                position: absolute;
                bottom: 40px;
                left: 0;

                padding: 0 15px;

                color: #fff;
            }

            .course-title {
                display: flex;

                width: 100%;

                font-weight: bold;

                justify-content: space-between;

                .add-course {
                    border-radius: 10px;
                    padding: 2px 5px;

                    font: normal 14px/14px "微软雅黑";

                    background-color: #42a514;

                    cursor: pointer;
                }

                .del-course {
                    border-radius: 10px;
                    padding: 2px 5px;

                    font: normal 14px/14px "微软雅黑";

                    background-color: #fd5e5e;

                    cursor: pointer;
                }
            }

            .desc {
                overflow: hidden;

                bottom: 10px;

                font-size: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
